<?php
@session_start();
if (!empty($_SESSION['usuario'])) {
    
include_once '../../Model/M_Persona.php';

$obj = new M_Persona();
$lista = $obj->listarMosos_Todos();
?>
<!DOCTYPE html>
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title></title>
        <style>
            html,body{
                width: 100%;
                height: 100%;
                margin: 0px;
                padding: 0px;
            }
            .capaPrincipal{
                width: 100%;
                height: 100%;
            }
            .capaIzquierda{
                float: left;
                height: 100%;
                width: -moz-calc(100% - 100px); 
                width: -webkit-calc(100% - 100px); 
                width: calc(100% - 100px);
                font-weight: bold;
            }
            .capaDerecha{
                float: right;
                height: 100%;
                width: 100px;
                font-weight: bold;
            }
            .mesero{
                float: left;
                margin: 10px;
            }
            .centrar{
                margin-top: 100px;
                margin-left: 100px;
            }
            .opciones{
                margin-bottom: 10px;
                margin-right: 10px;
                margin-top: 10px;
            }
            .zona{
                margin: 10px;
                float: left;
                font-weight: bolder;
                width: -moz-calc(100% - 20px); 
                width: -webkit-calc(100% - 20px); 
                width: calc(100% - 20px); 
                border: 3px solid #A8A8A8;
                -webkit-box-shadow: 3px 3px 3px #A8A8A8;
                -moz-box-shadow: 3px 3px 3px #A8A8A8;
                font-size: 18px;
                font-family: sans-serif;
                text-shadow: 3px 3px 3px #aaa;
                background: #f5f6f6;
                background: -moz-linear-gradient(-45deg,  #f5f6f6 0%, #dbdce2 21%, #b8bac6 49%, #dddfe3 80%, #f5f6f6 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f5f6f6), color-stop(21%,#dbdce2), color-stop(49%,#b8bac6), color-stop(80%,#dddfe3), color-stop(100%,#f5f6f6));
                background: -webkit-linear-gradient(-45deg,  #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
                background: -o-linear-gradient(-45deg,  #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
                background: -ms-linear-gradient(-45deg,  #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
                background: linear-gradient(135deg,  #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=1 );
            }
            .tituloMeseros{
                margin: 10px;
                float: left;
                font-weight: bolder;
                width: -moz-calc(100% - 20px); 
                width: -webkit-calc(100% - 20px); 
                width: calc(100% - 20px); 
                border: 3px solid #A8A8A8;
                -webkit-box-shadow: 3px 3px 3px #A8A8A8;
                -moz-box-shadow: 3px 3px 3px #A8A8A8;
                font-size: 18px;
                font-family: sans-serif;
                text-shadow: 3px 3px 3px #aaa;
                background: #f5f6f6;
                background: -moz-linear-gradient(-45deg,  #f5f6f6 0%, #dbdce2 21%, #b8bac6 49%, #dddfe3 80%, #f5f6f6 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#f5f6f6), color-stop(21%,#dbdce2), color-stop(49%,#b8bac6), color-stop(80%,#dddfe3), color-stop(100%,#f5f6f6));
                background: -webkit-linear-gradient(-45deg,  #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
                background: -o-linear-gradient(-45deg,  #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
                background: -ms-linear-gradient(-45deg,  #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
                background: linear-gradient(135deg,  #f5f6f6 0%,#dbdce2 21%,#b8bac6 49%,#dddfe3 80%,#f5f6f6 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#f5f6f6', endColorstr='#f5f6f6',GradientType=1 );
                font-size: 40px;
                text-align: center;
            }
            .leyendaMesaOcupada{
                background: #efc5ca;
                background: -moz-linear-gradient(-45deg,  #efc5ca 0%, #d24b5a 50%, #ba2737 51%, #f18e99 100%);
                background: -webkit-gradient(linear, left top, right bottom, color-stop(0%,#efc5ca), color-stop(50%,#d24b5a), color-stop(51%,#ba2737), color-stop(100%,#f18e99));
                background: -webkit-linear-gradient(-45deg,  #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
                background: -o-linear-gradient(-45deg,  #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
                background: -ms-linear-gradient(-45deg,  #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
                background: linear-gradient(135deg,  #efc5ca 0%,#d24b5a 50%,#ba2737 51%,#f18e99 100%);
                filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#efc5ca', endColorstr='#f18e99',GradientType=1 );
                -webkit-box-shadow: 4px 4px 4px #999;
                -moz-box-shadow: 4px 4px 4px #999;
                border-width: 4px;
                height: 60px;
                width: 100%;
                font-weight: bold;
                font-size: 20px;
                cursor: pointer;
            }
            .meseroNombre{
                text-align: center;
                text-decoration: none;
                color: black;
            }
        </style>
    </head>
    <body>
        <div class="capaPrincipal">
            <div style="background-color: black; height: 70px; ">
                <div style="float: left; padding-left: 10px; margin-top: 5px;">
                    <img src="../images/mozos.jpg" height="60px" /> <label style="color: white; font-weight: bolder; vertical-align: middle;">ZONA DE PEDIDOS</label>
                </div>                
            </div>
            <div class="capaIzquierda">
                
                <div class="centrar">
                    <div class="tituloMeseros">
                        LISTADO DE MOZOS
                    </div>
                    <div class="zona">
                        <?
                        if (count($lista) > 0) {
                        for ($i = 0; $i < (count($lista)); $i++) {
                        ?>
                        <a href="../../Controller/C_AsignaMosoPedido.php?idMoso=<?= $lista[$i]['id_persona'];?>&nombres=<?=$lista[$i]['nombres']; ?>">
                            <div class="mesero">
                                <div class="meseroImagen"><img src="../images/waiter.png" /></div>
                                <div class="meseroNombre"><?= $lista[$i]['nombres'] ?></div>
                            </div>
                        </a>
                        <?
                        }
                        }  
                        ?>
                        <a href="../../Controller/C_AsignaMosoPedido.php?idMoso=0">
                            <div class="mesero">
                                <div class="meseroImagen"><img src="../images/waiter.png" /></div>
                                <div class="meseroNombre">SIN MOZO</div>
                            </div>
                        </a>
                    </div>
                </div>
            </div>
            <div class="capaDerecha">
                <div class="opciones">
                    <a href="../../Controller/C_Logout.php">
                    <button id="leyendaMesaOcupada" class="leyendaMesaOcupada">SALIR</button>
                    </a>
                    <a href="V_MesasPorZonaVistaTabla.php">
                    <button id="leyendaMesaOcupada" class="leyendaMesaOcupada">IR A ZONAS</button>
                    </a>
                </div>
            </div>
        </div>
<?php
    } else {
    ?>
    <script language="JavaScript" type="text/javascript">
        alert('Su session a expirado, por favor Ingrese Nuevamente');
        location.href = '../V_Login.php';
    </script>
    <?php } ?>
    </body>      
</html>
